import {
  Box,
  Chip,
  FormControl,
  InputAdornment,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
} from "@mui/material";
import React from "react";
import { useContext } from "react";
import { useEffect } from "react";
import { TitleContext } from "../../../router";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CancelIcon from "@mui/icons-material/Cancel";
import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
import { useState } from "react";
import SearchIcon from "@mui/icons-material/Search";
import usePlan from "../../../query/usePlan";
import { useSnackbar } from "notistack";
import Loading from "../../../components/loading";
import { queryClient } from "../../../query/CustomQueryClient";
import FindFail from "../../../components/FindFail";
export default function Plan() {
  const nowTitle = useContext(TitleContext);
  useEffect(() => {
    nowTitle.setnowTitle(5);
    queryClient.clear();
  }, []);
  const [cltype, setCltype] = useState(-1);
  const [clstate, setClstate] = useState(-1);
  const [weight, setWeight] = useState({ low: 0, high: 10 });
  const [searchName, setSearchName] = useState("");
  const { enqueueSnackbar } = useSnackbar();
  const changeSearchName = (e) => {
    setSearchName(e.target.value);
  };
  const {
    data: rows,

    isSuccess,
    isError,
    error,
    isLoading,
    mutate,
  } = usePlan();

  const reflesh = () => {};
  useEffect(() => {
    mutate({
      low: weight.low,
      high: weight.high,
      state: clstate === -1 ? null : clstate,
      type: cltype === -1 ? null : cltype,
      name: searchName,
    });
  }, [clstate, cltype, searchName, weight]);

  const changeType = (e) => {
    setCltype(e.target.value);
  };

  const changeState = (e) => {
    setClstate(e.target.value);
  };
  const changeLowWeight = (e) => {
    if (e.target.value < 0 || e.target.value > 100) return;
    setWeight({
      ...weight,
      low: e.target.value,
    });
  };

  const changeHighWeight = (e) => {
    if (e.target.value < 0 || e.target.value > 100) return;
    setWeight({
      ...weight,
      high: e.target.value,
    });
  };

  const columns = [
    { id: "name", label: "课程名", minWidth: 170 },
    { id: "openTime", label: "开设学期", minWidth: 100 },
    {
      id: "number",
      label: "课程编号",
      minWidth: 100,
    },
    {
      id: "apartment",
      label: "开设单位",
      minWidth: 140,
    },
    {
      id: "weight",
      label: "学分",
      minWidth: 70,
    },
    {
      id: "duration",
      label: "总学时",
      minWidth: 100,
    },
    {
      id: "type",
      label: "课程属性",
      minWidth: 100,
    },
    {
      id: "state",
      label: "状态",
      minWidth: 100,
    },
  ];
  const [Rows, setRows] = useState([]);
  // const gsrsplan = [];

  useEffect(() => {
    //
    if (isSuccess) {
      //
      if (rows.data.code == 0) setRows(rows.data.data);
      else setRows([]);
    }
    if (isError) {
      //
      enqueueSnackbar("网络错误", { variant: "error" });
    }
  }, [isSuccess, isError]);

  return (
    <Box
      sx={{
        width: "100%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      {/* {isSuccess && ( */}
      <Box
        sx={{
          m: 1,
          width: "80%",
          display: "flex",
          flexDirection: "row",
          marginBottom: "20px",
        }}
      >
        <TextField
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),
          }}
          id="outlined-search"
          label="搜索"
          value={searchName}
          onChange={changeSearchName}
          type="search"
          sx={{ marginRight: "30px" }}
        />

        <FormControl>
          <InputLabel id="demo-simple-select-label">课程类型</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={cltype}
            label="classType"
            onChange={changeType}
            sx={{ marginRight: "30px" }}
          >
            <MenuItem value={-1}>不限</MenuItem>
            <MenuItem value={"必修"}>必修</MenuItem>
            <MenuItem value={"选修"}>选修</MenuItem>
            <MenuItem value={"限选"}>限选</MenuItem>
          </Select>
        </FormControl>

        <FormControl>
          <InputLabel id="demo-simple-select-label">学习状态</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={clstate}
            label="classType"
            onChange={changeState}
            sx={{ marginRight: "30px" }}
          >
            <MenuItem value={-1}>不限</MenuItem>
            <MenuItem value={1}>未修</MenuItem>
            <MenuItem value={0}>已修</MenuItem>
            <MenuItem value={2}>挂科</MenuItem>
          </Select>
        </FormControl>

        <TextField
          id="outlined-number"
          label="最低学分"
          type="number"
          InputLabelProps={{
            shrink: true,
          }}
          value={weight.low}
          onChange={changeLowWeight}
          sx={{ marginRight: "10px", width: "80px" }}
        />
        <TextField
          id="outlined-number"
          label="最高学分"
          type="number"
          InputLabelProps={{
            shrink: true,
          }}
          value={weight.high}
          onChange={changeHighWeight}
          sx={{ marginRight: "30px", width: "80px" }}
        />
      </Box>
      <Paper sx={{ width: "80%" }}>
        <TableContainer sx={{ maxHeight: 1000 }}>
          <Table stickyHeader aria-label="sticky table">
            <TableHead>
              <TableRow>
                {columns.map((column) => (
                  <TableCell
                    key={column.id}
                    align="left"
                    style={{ minWidth: column.minWidth }}
                  >
                    {column.label}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            {isSuccess && (
              <TableBody>
                {Rows
                  // .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                  .map((row) => {
                    return (
                      <TableRow
                        hover
                        role="checkbox"
                        tabIndex={-1}
                        key={row.code}
                      >
                        {columns.map((column) => {
                          let value = row[column.id];
                          if (column.id == "state") {
                            if (value == 0)
                              value = (
                                <Chip
                                  label="已修"
                                  variant="outlined"
                                  color="success"
                                  size="small"
                                  onClick={() => {
                                    setClstate(0);
                                  }}
                                />
                              );
                            else if (value == 1)
                              value = (
                                <Chip
                                  label="未修"
                                  variant="outlined"
                                  color="info"
                                  size="small"
                                  onClick={() => {
                                    setClstate(1);
                                  }}
                                />
                              );
                            else if (value == 2)
                              value = (
                                <Chip
                                  label="挂科"
                                  variant="outlined"
                                  color="error"
                                  size="small"
                                  onClick={() => {
                                    setClstate(2);
                                  }}
                                />
                              );
                            // else value="未知"
                          }
                          return (
                            <TableCell key={column.id} align={column.align}>
                              {value == null || value == ""
                                ? "gsr不造数据"
                                : value}
                            </TableCell>
                          );
                        })}
                      </TableRow>
                    );
                  })}
              </TableBody>
            )}
          </Table>

          {isLoading && <Loading />}
          {Rows.length === 0 && !isLoading && <FindFail />}
        </TableContainer>
      </Paper>
    </Box>
  );
}
